.text-black {
		color: #000;
	}
	
	.text-dark {
		color: #333;
	}
	
	.text-deep {
		color: #555;
	}
	
	.text-weak {
		color: #b3b3b3;
	}
	
	.text-white {
		color: #fff;
	}
	
	/*字体*/
	.f10 {
		font-size: 10px;
	}
	
	.f12 {
		font-size: 12px;
	}
	
	.f14 {
		font-size: 14px;
	}
	
	.f15 {
		font-size: 15px;
	}
	
	.f17 {
		font-size: 17px;
	}
	
	.f20 {
		font-size: 20px;
	}
	
	.f24 {
		font-size: 24px;
	}
	
	/* 文字对齐*/
	.tl {
		text-align: left;
	}
	
	.tc {
		text-align: center;
	}
	
	.tr {
		text-align: right;
	}
	
	/*浮动与清除浮动*/
	.fl {
		float: left;
	}
	
	.fr {
		float: right;
	}
	
	/*#ifdef H5*/
	.fix {
		zoom: 1;
	}
	
	.fix:after {
		display: table;
		content: '';
		clear: both;
	}
	/*#endif*/
	
	/*显示*/
	.dn {
		display: none;
	}
	
	.di {
		display: inline;
	}
	
	.db {
		display: block;
	}
	
	.dib {
		display: inline-block;
	}
	
	.dt {
		display: table;
	}
	/*#ifdef H5*/
	div.dib {
		display: inline;
		zoom: 1;
	}
	/*#endif*/
	
	.vm {
		vertical-align: middle;
	}
	
	.vib {
		display: inline-block;
		vertical-align: middle;
	}
	
	/*定位*/
	.pr {
		position: relative;
	}
	
	.pa {
		position: absolute;
	}
	
	.pf {
		position: fixed;
	}
	
	/*盒子模型*/
	.ml4 {
		margin-left: 4px;
	}
	
	.mr4 {
		margin-right: 4px;
	}
	
	.mt4 {
		margin-top: 4px;
	}
	
	.mb4 {
		margin-bottom: 4px;
	}
	
	.ml8 {
		margin-left: 8px;
	}
	
	.mr8 {
		margin-right: 8px;
	}
	
	.mt8 {
		margin-top: 8px;
	}
	
	.mb8 {
		margin-bottom: 8px;
	}
	
	.ml12 {
		margin-left: 12px;
	}
	
	.mr12 {
		margin-right: 12px;
	}
	
	.mt12 {
		margin-top: 12px;
	}
	
	.mb12 {
		margin-bottom: 12px;
	}
	
	.ml16 {
		margin-left: 16px;
	}
	
	.mr16 {
		margin-right: 16px;
	}
	
	.mt16 {
		margin-top: 16px;
	}
	
	.mb16 {
		margin-bottom: 16px;
	}
	
	.ml20 {
		margin-left: 20px;
	}
	
	.mr20 {
		margin-right: 20px;
	}
	
	.mt20 {
		margin-top: 20px;
	}
	
	.mb20 {
		margin-bottom: 20px;
	}
	
	.ml24 {
		margin-left: 24px;
	}
	
	.mr24 {
		margin-right: 24px;
	}
	
	.mt24 {
		margin-top: 24px;
	}
	
	.mb24 {
		margin-bottom: 24px;
	}
	
	.ml10 {
		margin-left: 10px;
	}
	
	.mr10 {
		margin-right: 10px;
	}
	
	.mt10 {
		margin-top: 10px;
	}
	
	.mb10 {
		margin-bottom: 10px;
	}
	
	.ml15 {
		margin-left: 15px;
	}
	
	.mr15 {
		margin-right: 15px;
	}
	
	.mt15 {
		margin-top: 15px;
	}
	
	.mb15 {
		margin-bottom: 15px;
	}
	
	/*按钮禁用*/
	.disabled {
		outline: 0 none;
		cursor: default !important;
		opacity: 0.4;
		filter: alpha(opacity=40);
		-ms-pointer-events: none;
		pointer-events: none;
	}
	
	/**
	 * 
	 * 自定义class工具
	 * 
	*/
	
	.pad {
		padding: 0 30upx;
	}
	// 格式化页面
	.page_box {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: hidden;
	}
	.scroll-box {
		flex: 1;
		height: 100%;
		position: relative;
	}
	.content_box {
		flex: 1;
		overflow-y: auto;
	}
	/*单行文本溢出省略号*/
	.one-t {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		transition: all linear 0.2s;
	}
	/*多行文本溢出省略号*/
	.more-t {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		transition: all linear 0.2s;
	}
	
	/* ==================
	          flex布局(colorui里面也有相关基础样式)
	 ==================== */
	/* x水平排列*/
	.x-f {
		display: flex;
		align-items: center;
	}
	/*x两端且水平居中*/
	.x-bc {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/*x平分且水平居中*/
	.x-ac {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	/*x水平靠上对齐*/
	.x-start {
		display: flex;
		align-items: flex-start;
	}
	/*x水平靠下对齐*/
	.x-end {
		display: flex;
		align-items: flex-end;
	}
	/*上下左右居中*/
	.x-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*y竖直靠左*/
	.y-start {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	/*y竖直靠右*/
	.y-end {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	/*y竖直居中*/
	.y-f {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	// y竖直两端
	.y-b {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	/*y竖直两端居中*/
	.y-bc {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	/* ==================
	     flex布局  
	 ==================== */
	/* ==================
	      渐变色 
	 ==================== */
	/**
	* 溢出省略号
	* @param {Number} 行数
	*/
	/* shopro主题颜色 */
	/* 深黑 */
	#dark-theme {
	  background: #000;
	}
	#dark-theme .bColor {
	  background: #333;
	  color: #999;
	}
	#dark-theme .borderColor {
	  border-color: #999;
	}
	/* 粉红 */
	#red-theme {
	  background: #f9e5ee;
	}
	#red-theme .bColor {
	  background: #f9e5ee;
	  color: #8e5a54;
	}
	#red-theme .borderColor {
	  border-color: #8e5a54;
	}
	/* 橘黄 */
	#yellow-theme {
	  background: #f6e1c9;
	}
	#yellow-theme .bColor {
	  background: #f6e1c9;
	  color: #8c6031;
	}
	#yellow-theme .borderColor {
	  border-color: #8c6031;
	}
	page {
	  -webkit-overflow-scrolling: touch;
	  height: 100%;
	  background: #f8f9fb;
	  width: 100%;
	  font-size: 30rpx;
	  font-family: NotoSansHans-Bold;
	  color: #333;
	  overflow-x: hidden;
	}
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	  display: none;
	}
	